<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<table border="1">
				<tr>
					<th>编号	</th>
					<th>商品名</th>
					<th>价格</th>
					<th>数量</th>
					<th>商品总价</th>
				</tr>
				<tr v-for="item in cartItems">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.price}}</td>
					<td>{{item.count}}</td>
					<td>{{item.count*item.price}}</td>
				</tr>
				<tr>
					<td>
						总价:{{total}}
						
					</td>
				</tr>
				
				
			</table>
		</div>
		
		<script>
			var app = Vue.createApp({
				data() {
					return {
						cartItems:[
							{id:1001,name:'足球',price:20.0,count:10},
							{id:1002,name:'篮球',price:30.0,count:5},
							{id:1003,name:'乒乓球',price:2.0,count:15},
						]
					}
				}
				,
				computed:{
					total(){
						all = 0;
						for(i in this.cartItems)
						{
							all += this.cartItems[i].price * this.cartItems[i].count
						}
						return all;
					}
				}
			});
			var vm = app.mount("#app")
		</script>



	</body>
</html>